import React from 'react';

import Context from './components/Context'
import './index.less'

export default class Index extends React.Component {
    constructor(props) {
        super(props);
        this.bindFunc =this.bindFunc.bind(this);
    }
    //回调写法
    fatherClick = (item,e) => {
        console.log(item, e)
    }

    //bind写法
    bindFunc(item, e) {
        console.log(item, e)
    }

    render() {
        let _arr = [1,2,3,4,5];

        return (
            <div>
                <Context />
                {
                    _arr.map((item, index) => (
                        // 事件循环，根据官网介绍，可以直接写回调方法
                        // <TestCur id={item} onClick={(e) => {this.fatherClick(item, e)}} />
                        <TestCur id={item} onClick={this.bindFunc.bind(this, item)} />
                    ))
                }
                <TestCur id={'das'} onClick={this.fatherClick} />
            </div>
        )
    }
}



class TestCur extends React.Component {
    constructor(props) {
        super(props)
    }
    handleClick = () => {
        this.props.onClick('----' + this.props.id)
    }

    render() {
        return (
            <div className="test-wrap">
                <button onClick={this.handleClick}>点击操作</button>
            </div>
        )
    }
}